<template>
  <div class="duty">
    <div class="screen_box">
      <div class="select_box">
        <div class="select_li">
          <el-select v-model="yearData" placeholder="请选择" size="mini" @change="selectTime('year')" value-key="year">
            <el-option v-for="item in yearOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="monthData" placeholder="请选择" size="mini" @change="selectTime('month')">
            <el-option
              v-for="item in monthOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="exportData(0)">导出公示表</el-button>
        <el-button type="primary" size="small" @click="exportData(1)">导出补助发放表</el-button>
      </div>
    </div>
    <div class="info_con">
      <div class="info_right">
        <div class="info_detail_title">
          <div class="title_name">加班误餐补助审批单</div>
        </div>
        <div class="table_con" ref="table_con">
          <vxe-table
            border
            stripe
            class="mytable-scrollbar"
            highlight-hover-row
            size="medium"
            height="100%"
            :data="tableData"
            align="center"
            v-if="!load">
            <vxe-table-column field="orgName" title="部门" width="200"></vxe-table-column>
            <vxe-table-column field="userName" title="姓名" width="200"></vxe-table-column>
            <vxe-table-column field="overTimeDay" title="加班日期" min-width="120"></vxe-table-column>
            <vxe-table-column field="overTimeReason" title="加班事由" min-width="140"></vxe-table-column>
            <!-- <vxe-table-column field="punchTime" title="打卡时间" min-width="140"></vxe-table-column> -->
            <vxe-table-column field="amount" title="金额（元）" width="200"></vxe-table-column>
          </vxe-table>
        </div>
        <div class="table-pagination">
          <pagination
            class="footer sub-margin"
            :page-size.sync="tablePage.pageSize"
            :total="tablePage.totalSize"
            :current-page.sync="tablePage.pageNum"
            layout="slot,prev, pager, next, sizes, jumper"
            @currentChange="onPageChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSubsidyCollectList, exportSubsidyNotice, exportSubsidyGrant } from '@apis/api-dailyManage.js'
import moment from 'moment'
import pagination from '@com/pagination.vue'
import { selectYearFun } from '@utility/utility.js'
export default {
  name: 'repairStatistics',
  components: { pagination },
  props: {},
  data() {
    return {
      load: false,
      yearOption: [
        {
          value: '2022',
          label: '2022年',
        },
        {
          value: '2023',
          label: '2023年',
        },
      ],
      yearData: moment().format('YYYY'),
      monthOption: [
        // {
        //   value: '',
        //   label: '全部',
        // },
        {
          value: '1',
          label: '1月',
        },
        {
          value: '2',
          label: '2月',
        },
        {
          value: '3',
          label: '3月',
        },
        {
          value: '4',
          label: '4月',
        },
        {
          value: '5',
          label: '5月',
        },
        {
          value: '6',
          label: '6月',
        },
        {
          value: '7',
          label: '7月',
        },
        {
          value: '8',
          label: '8月',
        },
        {
          value: '9',
          label: '9月',
        },
        {
          value: '10',
          label: '10月',
        },
        {
          value: '11',
          label: '11月',
        },
        {
          value: '12',
          label: '12月',
        },
      ],
      monthData: moment().format('M'),
      tableData: [],
      tablePage: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      activeRow: {},
      selectYearFun,
    }
  },
  computed: {},
  filters: {
    CompletedStatus(val) {
      if (val === '0') {
        return '进行中'
      } else if (val === '1') {
        return '已完成'
      } else {
        return ''
      }
    },
  },
  watch: {},
  created() {
    this.yearOption = this.selectYearFun(2023)
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getSubsidyCollectList({
        overtimeYear: this.yearData,
        overtimeMonth: this.monthData,
        current: this.tablePage.pageNum,
        size: this.tablePage.pageSize,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        this.load = false
        this.tableData = res.data.records
        this.tablePage.totalSize = res.data.total
      })
    },
    selectTime(type) {
      this.tablePage.pageNum = 1
      this.getData()
    },
    onPageChange(e) {
      this.tablePage.pageNum = e
      this.getData()
    },
    exportData(type) {
      const req = `?month=${this.monthData}&year=${this.yearData}&tenantId=${localStorage.pskh_tenantId}`
      const link = document.createElement('a')
      link.target = 'targetName'
      if (type === 0) {
        link.href = exportSubsidyNotice(req)
      } else {
        link.href = exportSubsidyGrant(req)
      }
      link.click()
      link.remove()
    },
  },
}
</script>

<style lang="scss" scoped>
.duty {
  height: 100%;
  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid #efefef;
    // box-shadow: 0 3px 5px 0 rgba(2, 2, 2, 0.1);
    .select_box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
          width: 150px;
        }
      }
    }
  }
  .info_con {
    display: flex;
    height: calc(100% - 60px);
    .info_left {
      width: 200px;
    }
    .info_right {
      flex: 1;
      height: 100%;
    }
  }
  .info_detail_title {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 20px;
    padding-left: 20px;
    text-align: center;
    margin-top: 10px;
  }
  .table_con {
    margin: 10px 0 5px;
    height: calc(100% - 115px);
    .edit-btn {
      cursor: pointer;
      font-size: 20px;
    }
  }
}
.branch_dialog {
  /deep/.el-dialog__body {
    padding-left: 20px;
    padding-right: 20px;
    .el-radio {
      margin-right: 20px;
    }
    .el-textarea {
      margin: 20px 0;
    }
    .btn_save {
      text-align: right;
    }
  }
}
</style>
